<template>
  <div
    class="reset-password-page flexbox flex-tb flex-center bg-center bg-no-repeat lg:bg-[url(https://cd.sealmg.com/assets/img/login-page-bg.png)] max-lg:bg-[url(https://cd.sealmg.com/assets/img/mobile/login-page-bg.png)] z-[1000] bg-cover !w-screen !h-screen"
  >
    <div class="login-header">
      <FnNav />
    </div>
    <div class="pc-login-header">
      <div class="flexbox flex-align-center flex-justify-between flex-1">
        <NuxtLink :to="localePath('/')">
          <img
            class="logo"
            loading="lazy"
            src="https://cd.sealmg.com/assets/img/logo-img.png"
            alt="SEALMG logo"
            title="SEALMG company logo"
            srcset=""
          />
        </NuxtLink>
        <!-- Lange langTheme="white2" :onlyLange="true" /> -->
        <Langes langTheme="white2" :onlyLange="false" key="3" />
      </div>
    </div>
    <!-- <img
      loading="lazy"
      class="page-bg pc-page-bg object-cover"
      src="https://cd.sealmg.com/assets/img/login-page-bg.png"
      alt="Login page background"
      title="Login background image"
      srcset=""
    />
    <img
      loading="lazy"
      class="page-bg mobile-page-bg object-cover"
      src="https://cd.sealmg.com/assets/img/mobile/login-page-bg.png"
      alt="Mobile login background"
      title="Mobile login page background"
      srcset=""
    /> -->
    <div class="reset-box flexbox flex-tb flex-align-center">
      <img class="top-icon" loading="lazy" src="~/assets/img/change_email.png" alt="Change email icon" title="Email modification icon" />
      <h1 class="title">{{ $t('pages.newEmailAddress') }}</h1>
      <div class="desc">{{ $t('pages.enterNewEmail') }}{{ form.email }}</div>
      <div class="form">
        <el-form label-position="top" label-width="80px" :model="form">
          <el-form-item :label="$t('pages.verificationCode')">
            <el-input v-model="form.verificationCode" type="email" :placeholder="$t('pages.enterVerificationCode')">
              <img
                loading="lazy"
                slot="prefix"
                class="input-icon"
                src="https://cd.sealmg.com/assets/img/email-icon.png"
                alt="Email input icon"
                title="Email field icon"
              />
            </el-input>
          </el-form-item>
        </el-form>
        <el-button class="theme-btn pc-btn one-line" :disabled="form.email ? false : true" @click="submitReset">
          {{ $t('pages.verifica') }}
        </el-button>
        <div class="font-500 text-[0.75rem] text-[#B3B3B3] mt-2 text-center cursor-pointer" @click="sendVerification">
          {{ $t('pages.resendVerificationCode') }}
        </div>
        <!-- <el-button
          class="theme-btn mobile-btn one-line"
          :disabled="form.email ? false : true"
          @click="openthebulletbox"
          >{{ $t("formBtn.sendVerifyEmail") }}</el-button
        > -->
      </div>
    </div>
    <base-info />
    <!-- <el-dialog
      class="mobile-dialog"
      title=""
      :show-close="false"
      :visible.sync="showCheck"
    >
      <div class="register-check-box flexbox flex-tb flex-align-center">
        <img
          loading="lazy"
          class="top-icon"
          src="https://cd.sealmg.com/assets/img/verify-email-img.png"
          alt="https://cd.sealmg.com/assets/img/verify-email-img.png"
        />
        <div class="title">{{ $t("register.verifyEmail") }}</div>
        <div class="desc">
          {{ $t("register.verifyDescLeft") }}{{ form.email
          }}{{ $t("register.verifyDescRight") }}
        </div>
        <div class="form">
          <el-button
            class="theme-btn one-line"
            :disabled="form.email ? false : true"
            @click="submitLink"
            >{{ $t("register.checkEmail") }}</el-button
          >
        </div>
      </div>
      <div slot="footer" class="dialog-footer"></div>
    </el-dialog> -->
  </div>
</template>
<script>
  import { throttle } from '@/static/js/common'
  import FnNav from '@/components/mobile/FnNav'
  export default {
    name: 'resetPassword',
    components: {
      FnNav
    },
    data() {
      return {
        form: {
          email: '',
          verificationCode: ''
        },
        showCheck: false
      }
    },
    head() {
      return {
        title: 'Forget Password - SEALMG',
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: "If you forget your SEALMG login account, don't worry, you can quickly retrieve it through SEALMG."
          }
        ]
      }
    },
    created() {
      //
      this.sendVerification()
    },
    async asyncData({ query }) {
      return {
        form: {
          email: query.email
        }
      }
    },
    methods: {
      async sendVerification() {
        try {
          this.$axios.post('/api/ems/send', {
            event: 'resetpwd',
            email: this.form.email
          })
        } catch (error) {}
      },
      submitReset() {
        try {
          if (!this.form.verificationCode) return
          this.$axios
            .post('/api/user/changeemail', {
              email: this.form.email,
              captcha: this.form.verificationCode
            })
            .then(res => {
              this.$router.push({
                path: this.localePath('/change-email/success')
              })
            })
        } catch (error) {}
      }
    }
  }
</script>
<style lang="less" scoped>
  .base-info {
    margin-top: 18px;
  }
  /deep/.el-input__prefix {
    .icon {
      width: 24px;
      height: 24px;
      margin-top: 8px;
      border-radius: 50%;
    }
  }
  .reset-password-page {
    width: 100%;
    height: 100vh;
    position: relative;
    .login-header {
      display: none;
    }
    .pc-login-header {
      display: block;
      width: 969px;
      margin-bottom: 8px;
      .logo {
        width: 157px;
        height: 46px;
      }
    }
    .page-bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100vh;
      z-index: -1;
    }
    .pc-page-bg {
      display: block;
    }
    .mobile-page-bg {
      display: none;
    }
  }
  .reset-box {
    width: 969px;
    height: 574px;
    background: @color-ff;
    box-shadow: 0px 16px 32px 0px rgba(12, 3, 0, 0.06);
    border-radius: 32px;
    .top-icon {
      margin-top: 75px;
      width: 88px;
      height: 88px;
    }
    .title {
      margin-top: 16px;
      font-weight: 600;
      font-size: 24px;
      color: @font-color-26;
    }
    .desc {
      margin-top: 8px;
      text-align: center;
      max-width: 300px;
      font-weight: 500;
      font-size: 12px;
      color: @font-color-99;
    }
    .form {
      margin-top: 22px;
      width: 371px;
      .el-form-item {
        margin-bottom: 15px;
      }
      /deep/ .el-form--label-top .el-form-item__label {
        font-weight: 500;
        font-size: 12px;
        color: @font-color-99;
        line-height: 20px;
        padding: 0;
        margin-bottom: 6px;
      }
      /deep/ .el-input__inner {
        height: 48px;
        background: @color-f7;
        border-radius: 8px;
        border: none;
        font-weight: 500;
        font-size: 16px;
        color: @font-color-14;
      }
      /deep/ .el-input--prefix .el-input__inner {
        padding-left: 54px;
      }
      /deep/ .el-input__prefix {
        left: 12px;
      }
      .input-icon {
        width: 24px;
        height: 24px;
        // position: absolute;
        // top: 50%;
        // transform: translateY(-50%);
      }
      /deep/ .el-input__prefix {
        @apply flex items-center;
      }
      .theme-btn {
        padding: 0 16px;
        height: 50px;
        margin-top: 9px;
        margin-left: 0;
      }
      .pc-btn {
        display: block;
      }
      .mobile-btn {
        display: none;
      }
    }
  }
  .mobile-dialog {
    display: none;
  }
  @media only screen and (min-width: 1200px) {
  }
  @media screen and (max-width: 992px) and (min-width: 768px) {
    .reset-password-page {
      position: relative;
      justify-content: flex-start;
      .login-header {
        display: block;
      }
      .pc-login-header {
        display: none;
      }
      .pc-page-bg {
        display: none;
      }
      .mobile-page-bg {
        display: block;
        width: 736px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
    .reset-box {
      width: 768px;
      height: auto;
      background: transparent;
      box-shadow: none;
      .top-icon {
        margin-top: 24px;
      }
      .title {
        margin-top: 2px;
        font-weight: 500;
        color: @font-color-14;
      }
      .desc {
        margin-top: 8px;
        text-align: center;
        max-width: 288px;
        font-size: 14px;
        color: @font-color-99;
      }
      .form {
        margin-top: 32px;
        width: 736px;
        .el-form-item {
          margin-bottom: 10px;
        }
        /deep/ .el-form--label-top .el-form-item__label {
          font-weight: 500;
          font-size: 12px;
          color: @font-color-99;
          line-height: 20px;
          padding: 0;
          margin-bottom: 6px;
        }
        /deep/ .el-input__inner {
          height: 48px;
          font-size: 14px;
          color: @font-color-14;
        }
        /deep/ .el-input--prefix .el-input__inner {
          padding-left: 54px;
        }
        /deep/ .el-input__prefix {
          left: 12px;
        }
        .input-icon {
          width: 24px;
          height: 24px;
        }
        .theme-btn {
          padding: 0 16px;
          height: 48px;
          line-height: 48px;
          margin-top: 12px;
        }
        .mobile-btn {
          display: block;
        }
        .pc-btn {
          // display: none;
        }
      }
    }
    /deep/.base-info {
      position: absolute;
      left: 50%;
      bottom: 86px;
      width: 375px;
      transform: translateX(-50%);
      z-index: 9999999 !important;
    }
    .mobile-dialog {
      display: block;
      /deep/ .el-dialog {
        width: 293px;
        background: @color-ff;
        border-radius: 12px;
        .el-dialog__header,
        .el-dialog__footer {
          padding: 0;
        }
        .el-dialog__body {
          padding: 0;
        }
      }
      .register-check-box {
        width: 100%;
        box-sizing: border-box;
        padding: 0 28px;
        .top-icon {
          margin-top: 20px;
          width: 88px;
          height: 88px;
        }
        .title {
          margin-top: 12px;
          font-weight: 500;
          font-size: 24px;
          color: @font-color-14;
        }
        .desc {
          margin-top: 12px;
          text-align: center;
          font-size: 14px;
          color: @font-color-66;
        }
        .form {
          width: 100%;
          margin-top: 40px;
          .theme-btn {
            padding: 0 16px;
            width: 100%;
            height: 40px;
            line-height: 40px;
            margin-bottom: 32px;
          }
        }
      }
    }
  }
  @media screen and (max-width: 767px) {
    .reset-password-page {
      position: relative;
      justify-content: flex-start;
      .login-header {
        display: block;
      }
      .pc-login-header {
        display: none;
      }
      .pc-page-bg {
        display: none;
      }
      .mobile-page-bg {
        display: block;
        width: 343px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
    .reset-box {
      width: 375px;
      height: auto;
      background: transparent;
      box-shadow: none;
      .top-icon {
        margin-top: 24px;
      }
      .title {
        margin-top: 2px;
        font-weight: 500;
        color: @font-color-14;
      }
      .desc {
        margin-top: 8px;
        text-align: center;
        max-width: 288px;
        font-size: 14px;
        color: @font-color-99;
      }
      .form {
        margin-top: 32px;
        width: 343px;
        .el-form-item {
          margin-bottom: 15px;
        }
        /deep/ .el-form--label-top .el-form-item__label {
          font-weight: 500;
          font-size: 12px;
          color: @font-color-99;
          line-height: 20px;
          padding: 0;
          margin-bottom: 6px;
        }
        /deep/ .el-input__inner {
          height: 48px;
          font-size: 14px;
          color: @font-color-14;
        }
        /deep/ .el-input--prefix .el-input__inner {
          padding-left: 54px;
        }
        /deep/ .el-input__prefix {
          left: 12px;
        }
        .input-icon {
          width: 24px;
          height: 24px;
        }
        .theme-btn {
          padding: 0 8px;
          height: 48px;
          line-height: 48px;
          margin-top: 12px;
        }
        .mobile-btn {
          display: block;
        }
        .pc-btn {
          // display: none;
        }
        /deep/ .el-input__prefix {
          @apply flex items-center;
        }
      }
    }
    /deep/.base-info {
      // position: absolute;
      // left: 50%;
      // bottom: 86px;
      // width: 375px;
      // transform: translateX(-50%);
    }
    .mobile-dialog {
      display: block;
      /deep/ .el-dialog {
        width: 293px;
        background: @color-ff;
        border-radius: 12px;
        .el-dialog__header,
        .el-dialog__footer {
          padding: 0;
        }
        .el-dialog__body {
          padding: 0;
        }
      }
      .register-check-box {
        width: 100%;
        box-sizing: border-box;
        padding: 0 28px;
        .top-icon {
          margin-top: 20px;
          width: 88px;
          height: 88px;
        }
        .title {
          margin-top: 12px;
          font-weight: 500;
          font-size: 24px;
          color: @font-color-14;
        }
        .desc {
          margin-top: 12px;
          text-align: center;
          font-size: 14px;
          color: @font-color-66;
        }
        .form {
          width: 100%;
          margin-top: 40px;
          .theme-btn {
            padding: 0 8px;
            width: 100%;
            height: 40px;
            line-height: 40px;
            margin-bottom: 32px;
          }
        }
      }
    }
  }
</style>
